@import '../../../../../../common';

.pipeline {
    display: flex;
    flex-direction: column;
    align-content: stretch;
    height: 100%;

    .paddingContent {
        padding-left: 20px;
        padding-right: 20px;
    }

    ul {
        list-style: none;

        li.stage {
            width: 10%;
            float: left;
            position: relative;

            .stageItem {
                width: 60%;
                margin-left: auto;
                margin-right: auto;

                ul {
                    list-style: none;
                    padding: 0px;
                    position: relative;

                    li {
                        margin-bottom: 10px;
                        margin-top: 10px;
                        padding-top: 5px;
                        padding-bottom: 5px;
                        position: relative;

                        :host-context(.night) & {
                            color: $darkTheme_grey_6;

                            .success.nzSegment {
                                background-color: $darkTheme_night_green;
                            }

                            .fail.nzSegment {
                                background-color: $darkTheme_night_red;
                            }

                            .inactive.nzSegment {
                                background-color: $darkTheme_night_grey;
                            }

                            .building.nzSegment {
                                background-color: $darkTheme_night_blue;
                            }
                        }

                        .success.nzSegment {
                            background-color: $cds_color_light_green;
                        }

                        .fail.nzSegment {
                            background-color: $cds_color_light_red;
                        }

                        .inactive.nzSegment {
                            background-color: $cds_color_light_grey;
                        }

                        .building.nzSegment {
                            background-color: $cds_color_light_teal;
                        }

                        .newspaper .icon {
                            float: right;
                        }
                    }

                    li:first-child::before {
                        width: 50%;
                        left: -50%;
                    }

                    li:first-child::after {
                        width: 50%;
                        right: -50%;
                    }

                    li::before {
                        content: '';
                        top: -42px;
                        border-bottom: 4px solid $cds_color_teal;
                        border-left: 4px solid $cds_color_teal;
                        position: absolute;
                        width: 40px;
                        left: -40px;
                        height: calc(100% + 14px);
                    }

                    li::after {
                        content: '';
                        top: -42px;
                        border-bottom: 4px solid $cds_color_teal;
                        border-right: 4px solid $cds_color_teal;
                        position: absolute;
                        width: 40px;
                        right: -40px;
                        height: calc(100% + 14px);
                    }
                }

                .job.nzSegment {
                    height: 51px;
                    padding: 0;
                    border: 2px solid transparent;

                    .title {
                        padding: 5px;
                        height: 100%;
                        display: flex;
                        flex-direction: row;
                        align-items: center;

                        .ellipsis {
                            flex: 1;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }

                    .duration {
                        position: absolute;
                        right: 4px;
                        bottom: 4px;
                        color: gray;
                        font-size: 0.8rem;
                        font-weight: 600;
                    }

                    .warningPip {
                        position: absolute;
                        right: 4px;
                        top: 4px;
                        font-size: 1rem;
                    }
                }

                .job.nzSegment.active {
                    border: 2px solid $cds_color_teal;
                }
            }
        }

        li.one.stage {
            width: 100%;
        }

        li.two.stage {
            width: 50%;
        }

        li.three.stage {
            width: 33%;
        }

        li.four.stage {
            width: 25%;
        }

        li.five.stage {
            width: 20%
        }

        li.six.stage {
            width: 16%;
        }

        li.seven.stage {
            width: 14%;
        }
    }

    ul {
        li.stage:first-child {
            .stageItem {
                ul {
                    li::before {
                        border: 0 none
                    }
                }
            }
        }

        li.stage {
            .stageItem {
                ul {
                    li:first-child::after {
                        border-right: 0 none;
                    }

                    li:first-child::before {
                        border-left: 0 none;
                    }
                }
            }
        }

        li.stage:last-child {
            .stageItem {
                ul {
                    li::after {
                        border: 0 none
                    }
                }
            }
        }
    }
}

.orange {
  color: $cds_color_orange;
}
